<template>
  <div class="htmlPage">
    <div class="title">
      <span>交付委托书 / 提货单 / 发货通知单</span>
    </div>
    <div class="code">
      <span style="text-align: right">发货单编号: <b>CK22100041</b></span>
      <span>合同编号: <b>SO202210100001</b></span>
    </div>
    <ul>
      <li class="tableTitle"><b>交付内容</b></li>
      <li>
        <span class="border">品名</span>
        <span class="border">包装</span>
        <span class="border">单净重(KG)</span>
        <span class="border">件数</span>
        <span class="border" style="border-right: none">净重量(KG)</span>
      </li>
      <li v-for="(item, index) in data" :key="index">
        <span class="border">{{ item.Name }}</span>
        <span class="border">{{ item.Packing }}</span>
        <span class="border">{{ NumFormatting(item.Weight) }}</span>
        <span class="border">{{ NumFormatting(item.Quantity) }}</span>
        <span class="border" style="border-right: none">{{
          NumFormatting(item.Weight1)
        }}</span>
      </li>
      <li>
        <span class="border">样品袋交付确认书及运单</span>
        <span class="border">货物合计</span>
        <span class="border"
          >件数合计(件): <b>{{ NumFormatting(allNum) }}</b></span
        >
        <span class="border" style="border-right: none"
          >净重合计(KG): <b>{{ NumFormatting(allWeight) }}</b></span
        >
      </li>
      <li class="tableTitle"><b>交付要求</b></li>
      <li class="request">
        <div>
          收货单位:
          铭达新材料科技（天津）有限公司，地址：天津市-静海经济开发区北区七号路3号
        </div>
        <div class="SginImgBox">
          接货人:
          <div style="margin: 0 50px">
            <img class="SginImg" :src="entity.Sign" alt="" />
          </div>
          <b style="margin-left: 20px">13120277777</b>
        </div>
      </li>
      <li>
        <span class="border">送到时间: <b>2022-10-12</b></span>
        <span class="border">提货时间: <b>2022-10-12</b></span>
        <span class="border" style="border-right: none">方式: 门到门回执</span>
      </li>
      <li class="request">备注: 要质检单</li>
      <li>
        <span class="border" style="text-align: left; padding-left: 5px"
          >委托方: 北京吉安通达物流有限责任公司</span
        >
        <span
          class="border"
          style="border-right: none; text-align: left; padding-left: 5px"
          >委托方: 北京天罡助剂有限责任公司</span
        >
      </li>
      <li style="border-bottom: none">
        <span class="border" style="text-align: left; padding-left: 5px"
          >经手人 <b class="sTime">2022-10-11</b></span
        >
        <span
          class="border"
          style="border-right: none; text-align: left; padding-left: 5px"
          >经手人 <b class="sTime">2022-10-11</b></span
        >
      </li>
      <img src="@/assets/yz.png" class="seal" alt="" />
    </ul>
  </div>
</template>

<script>
const NumFormatting = function (data) {
  if (data != null) {
    return Number(data)
      .toFixed(2)
      .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,");
  } else {
    return "";
  }
};
export default {
  data() {
    return {
      entity: {},
      data: [],
      allNum: 0,
      allWeight: 0,
    };
  },
  mounted() {
    this.$http
      .post("/BO/BillList/GetBillData", { id: this.$route.query.id })
      .then((res) => {
        if (res.Success) {
          this.entity = res.Data;
          this.data = JSON.parse(res.Data.Content);
          let num = 0;
          let weight = 0;
          this.data.forEach((item) => {
            num += Number(item.Quantity);
            weight += Number(item.Weight1);
          });
          this.allNum = num;
          this.allWeight = weight;
          setTimeout(() => {
            window.print();
          }, 1000);
        } else {
          this.$message.error("数据获取失败!请刷新页面重试");
        }
      });
  },
  methods: {
    NumFormatting(data) {
      return NumFormatting(data);
    },
  },
};
</script>

<style lang="less" scoped>
.SginImgBox {
  display: flex;
  align-items: center;
  height: 80px;
  .SginImg {
    transform: rotate(-90deg);
    width: 80px;
  }
}
.htmlPage {
  width: 960px;
  .title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
    span {
      border-bottom: 1px solid #000;
    }
  }
  .code {
    display: flex;
    justify-content: space-around;
    span {
      width: 380px;
    }
  }
  ul {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 2px solid #666;
    line-height: 2;
    text-align: center;
    .seal {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 130px;
      height: 130px;
    }
    li {
      display: flex;
      border-bottom: 1px solid #666;
      .border {
        border-right: 1px solid #666;
        flex: 1;
        text-align: center;
        .sTime {
          float: right;
        }
      }
    }
    .request {
      display: block;
      text-align: left;
      padding: 0 5px;
    }
    .tableTitle {
      display: block;
    }
  }
}
</style>